<template>
    <div class="material-management">
      <!-- 顶部 -->
      <div class="header">
        <div>
          <h2>物料管理</h2>
          <div class="desc">管理和跟踪所有物料库存、状态和详情</div>
        </div>
        <div>
          <el-button style="background-color: #f5f7fa;" >添加物料</el-button>
        </div>
      </div>
  
      <!-- 筛选区 -->
      <el-form :inline="true" class="filter-bar" @submit.prevent>
        <el-form-item>
          <el-input v-model="filters.name" placeholder="输入物料名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-select v-model="filters.category" placeholder="物料类别" clearable style="width: 140px">
            <el-option label="电子元件" value="电子元件" />
            <el-option label="办公材料" value="办公材料" />
            <el-option label="已耗材" value="已耗材" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="filters.status" placeholder="库存状态" clearable style="width: 140px">
            <el-option label="所有状态" value="" />
            <el-option label="正常" value="正常" />
            <el-option label="低库存" value="低库存" />
            <el-option label="缺货" value="缺货" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleFilter">筛选</el-button>
        </el-form-item>
      </el-form>
  
      <!-- 统计卡片 -->
      <div class="stats-cards">
        <div class="stat-card">
          <div class="stat-title">总物料种类</div>
          <div class="stat-value">1,248</div>
          <div class="stat-footer green">↑ 12% 较昨日</div>
        </div>
        <div class="stat-card">
          <div class="stat-title">低库存物料</div>
          <div class="stat-value">86</div>
          <div class="stat-footer orange">↓ 5% 较昨日</div>
        </div>
        <div class="stat-card">
          <div class="stat-title">今日入库</div>
          <div class="stat-value">42</div>
          <div class="stat-footer green">↑ 8% 较昨日</div>
        </div>
        <div class="stat-card">
          <div class="stat-title">今日出库</div>
          <div class="stat-value">35</div>
          <div class="stat-footer red">↓ 3% 较昨日</div>
        </div>
      </div>
  
      <!-- 表格 -->
      <el-table
        :data="tableData"
        border
        style="width: 100%; margin-top: 20px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="40" />
        <el-table-column prop="name" label="物料名称" min-width="120" />
        <el-table-column prop="code" label="物料编码" min-width="100" />
        <el-table-column prop="model" label="规格型号" min-width="120" />
        <el-table-column prop="category" label="类别" min-width="100" />
        <el-table-column prop="stock" label="库存数量" min-width="100" />
        <el-table-column prop="status" label="库存状态" min-width="80">
          <template #default="{ row }">
            <el-tag
              :type="row.status === '正常' ? 'success' : row.status === '低库存' ? 'warning' : 'danger'"
              disable-transitions
            >
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="最近更新" min-width="120" />
        <el-table-column label="操作" min-width="120" fixed="right">
          <template #default="{ row }">
            <el-link type="primary" @click="handleView(row)">查看</el-link>
            <el-link type="primary" @click="handleEdit(row)">编辑</el-link>
            <el-link type="danger" @click="handleDelete(row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.pageSize"
        :total="pagination.total"
        :page-sizes="[10, 20, 50]"
        layout="total, sizes, prev, pager, next"
        style="margin: 20px 0; text-align: right"
      />
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  
  const filters = ref({
    name: '',
    category: '',
    status: ''
  })
  
  const tableData = ref([
    { name: '电阻器', code: 'MTR-001', model: '10kΩ 1/4W', category: '电子元件', stock: '1200 个', status: '正常', date: '2025-06-15' },
    { name: '电容器', code: 'MTR-002', model: '10μF 50V', category: '电子元件', stock: '350 个', status: '低库存', date: '2025-06-14' },
    { name: '单片机', code: 'MTR-003', model: 'STM32F103', category: '电子元件', stock: '80 个', status: '低库存', date: '2025-06-13' },
    { name: '螺旋灯', code: 'MTR-004', model: 'M3x10', category: '物料/五金', stock: '50 包(100个)', status: '缺货', date: '2025-06-13' },
    { name: '钻头', code: 'MTR-005', model: '6Ø8', category: '物料/五金', stock: '200 个', status: '正常', date: '2025-06-12' },
    { name: '打印纸', code: 'MTR-006', model: 'A4 70g', category: '办公材料', stock: '15 包(500张)', status: '正常', date: '2025-06-12' },
    { name: '记号笔', code: 'MTR-007', model: '', category: '办公材料', stock: '120 支', status: '正常', date: '2025-06-12' },
    { name: '标签', code: 'MTR-008', model: '50x40x30cm', category: '已耗材', stock: '500 卷', status: '正常', date: '2025-06-13' },
    { name: '气泡膜', code: 'MTR-009', model: '50cm宽', category: '已耗材', stock: '30 卷', status: '正常', date: '2025-06-13' },
    { name: '标志纸', code: 'MTR-010', model: '40x30mm', category: '已耗材', stock: '10 包(1000张)', status: '正常', date: '2025-06-12' }
  ])
  
  const pagination = ref({
    page: 1,
    pageSize: 10,
    total: 124
  })
  
  const handleFilter = () => {
    // TODO: 这里可以根据filters去请求数据
  }
  
  const handleSelectionChange = (val: any) => {
    // 多选操作
  }
  
  const handleView = (row: any) => {
    // 查看详情
  }
  
  const handleEdit = (row: any) => {
    // 编辑
  }
  
  const handleDelete = (row: any) => {
    // 删除
  }
  </script>
  
  <style scoped>
  .material-management {
    background: #f7f8fa;
    min-height: 100vh;
    padding: 32px 24px;
  }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 18px;
  }
  .header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
  }
  .header .desc {
    color: #888;
    font-size: 14px;
    margin-top: 4px;
  }
  .filter-bar {
    background: #fff;
    padding: 18px 18px 0 18px;
    border-radius: 10px;
    margin-bottom: 18px;
    box-shadow: 0 2px 8px #0001;
  }
  .stats-cards {
    display: flex;
    gap: 18px;
    margin-bottom: 18px;
  }
  .stat-card {
    flex: 1;
    background: #fff;
    border-radius: 10px;
    padding: 18px 24px;
    box-shadow: 0 2px 8px #0001;
  }
  .stat-title {
    color: #888;
    font-size: 14px;
    margin-bottom: 8px;
  }
  .stat-value {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 8px;
  }
  .stat-footer {
    font-size: 13px;
  }
  .stat-footer.green { color: #1bc47d; }
  .stat-footer.orange { color: #ff9900; }
  .stat-footer.red { color: #f56c6c; }
  </style>